<template>
  <div class="floodFill">
    <div class="floodFill-top">
      <span>
        水淹模拟
      </span>
      <el-popover
          class="floodFill-help"
          placement="top-end"
          title="帮助说明"
          width="250"
          trigger="click"
          content="点击'选择区域'后，鼠标左键点击模型中任意位置实现水淹模拟">
        <el-button slot="reference"><i class="ri-question-line"></i></el-button>
      </el-popover>
    </div>
    <div class="floodFill-divider">
      <el-divider>
        <i class="ri-pencil-line"></i>
      </el-divider>
    </div>
    <div class="floodFill-data">
      <el-form ref="floodFillData" :model="floodFillObj" label-width="120px">
        <el-form-item label="水淹距离">
          <el-input-number v-model="floodFillObj.distance" :step="1" :min="5"></el-input-number>
        </el-form-item>
        <el-form-item label="水位高度">
          <el-input-number v-model="floodFillObj.elevation" :step="0.1" :min="0.1"></el-input-number>
        </el-form-item>
        <el-form-item label="水颜色" class="color">
          <el-color-picker color-format="rgb" v-model="floodFillObj.color"></el-color-picker>
        </el-form-item>
        <el-form-item label="水淹模拟精度">
          <el-input-number v-model="floodFillObj.precision" :step="0.1" :max="1" :min="0"></el-input-number>
        </el-form-item>
      </el-form>
    </div>
    <div class="floodFill-btn">
      <el-button @click="selectFloodFill()">选择区域</el-button>
      <el-button @click="delFloodFill()">删除</el-button>
      <el-button @click="closeFloodFill()">关闭</el-button>
      <el-button @click="saveFloodFill()">保存</el-button>
    </div>
  </div>
</template>
<style lang="scss">
@import '@/css/AnalysisTools/floodFill';
</style>
<script>
/* eslint-disable */

export default {
  name: "floodFill",
  data() {
    return {
      floodFillObj: {
        distance: 200,
        //水位高度，单位：米
        elevation: 1,
        //水颜色
        color: 'rgb(15,143,187)',
        //水淹模拟精度 (取值范围：[0~1] 精度越高效率会降低)，默认值：0.5
        precision: 0.5,
      },
    }
  },
  methods: {
    extractRGBComponents(colorString) {
      const rgbRegExp = /rgb\((\d+),\s*(\d+),\s*(\d+)\)/;
      const match = colorString.match(rgbRegExp);
      if (match) {
        return [parseInt(match[1]) / 255, parseInt(match[2]) / 255, parseInt(match[3]) / 255];
      } else {
        return null;
      }
    },
    selectFloodFill() {
      this.$emit('select-floodFill');
    },
    delFloodFill() {
      __g.tools.stopFloodFill();
    },
    closeFloodFill() {
      this.$emit('close-popup');
      this.reloadFloodFill()
    },
    reloadFloodFill() {
      this.floodFillObj = {
        distance: 200,
        elevation: 1,
        color: 'rgb(15,143,187)',
        precision: 0.5,
      }
    },
    saveFloodFill() {
      this.$message.success("开发中")
    },
    addFloodFill(x, y, z) {
      let obj = {
        min: [x - this.floodFillObj.distance, y - this.floodFillObj.distance],
        max: [x + this.floodFillObj.distance, y + this.floodFillObj.distance],
        seed: [x, y],
        elevation: z + this.floodFillObj.elevation,
        color: this.floodFillObj.color,
        precision: this.floodFillObj.precision,
      }
      __g.tools.startFloodFill(obj);
    },
  },
  mounted() {

  },
  created() {

  },
  destroyed() {
    this.reloadFloodFill()
  },
};
</script>